<template>
    <vue3-tree-org
        v-loading="loading"
        class="building-org-tree"
        :props="orgTreeProps"
        :tool-bar="toolBar"
        :data="data"
        :horizontal="horizontal"
        :collapsable="collapsable"
        :scalable="scalable"
        :draggable="draggable"
        :define-menus="[]"
    >
        <template v-slot="{ node }">
            <el-popover
                v-model="popoverShow"
                popper-class="org-tree-popover"
                trigger="hover"
                placement="right"
                :offset="6"
                @show="onPopoverShow(node)"
            >
                <template #reference>
                    <div class="tree-org-node__text" :class="buildingOrgTreeDataDic[node.id] ? `level-${ buildingOrgTreeDataDic[node.id].level }` : ''">
                        <span>{{ node.label }}</span>
                    </div>
                </template>
                <div v-for="(menuItem, index) in menuList" :key="index">
                    <div
                        v-if="menuItem.show"
                        class="menu-item"
                        :class="{ delete: menuItem.command.includes('delete') }"
                        @click="onMenuClick(menuItem)"
                    >
                        <span>{{ menuItem.name }}</span>
                    </div>
                </div>
            </el-popover>
        </template>
    </vue3-tree-org>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, reactive, toRefs, watch } from 'vue';
import { ElPopover } from 'element-plus';
import { BuildingOrgTreeState } from './type';

const props = defineProps({
    name: {
        type: String,
        default: '',
    },
    loading: {
        type: Boolean,
        default: false
    },
    orgTreeProps: {
        type: Object,
        default: () => {
            return {
                id: 'id',
                pid: 'pid',
                label: 'name',
                expand: 'expand',
                children: 'sonList'
            };
        }
    },
    toolBar: {
        type: Object,
        default: () => {
            return {
                scale: false,
                restore: false,
                expand: false,
                zoom: false,
                fullscreen: false,
            };
        }
    },
    data: {
        type: Object,
        default: () => {
            return {};
        }
    },
    horizontal: {
        type: Boolean,
        default: true
    },
    collapsable: {
        type: Boolean,
        default: true
    },
    scalable: {
        type: Boolean,
        default: false
    },
    draggable: {
        type: Boolean,
        default: false
    },
    menuList: {
        type: Array,
        default: () => {
            return [];
        }
    },
});
const emit = defineEmits(['onPopoverShow', 'onMenuClick']);

const state = reactive<BuildingOrgTreeState>({
    buildingOrgTreeData: {},
    buildingOrgTreeDataDic: {},
    popoverShow: false,
});
const {
    buildingOrgTreeData,
    buildingOrgTreeDataDic,
    popoverShow,
} = toRefs(state);

// 初始化楼盘图
const initBuildingTree = (data:any) => {
    data.expand = true;
    state.buildingOrgTreeDataDic[data.id] = data;
    if (data[props.orgTreeProps.children]) {
        data[props.orgTreeProps.children].forEach((item:any) => {
            item.pid = data.id.toString();
            item.expand = true;
            state.buildingOrgTreeDataDic[item.id] = item;
            if (item[props.orgTreeProps.children]) {
                initBuildingTree(item);
            }
        });
    }
};
watch(() => props.data, () => {
    initBuildingTree(props.data);
    state.buildingOrgTreeData = props.data;
});

const onPopoverShow = (node:any) => {
    const currentNodeData = state.buildingOrgTreeDataDic[node.id];
    emit('onPopoverShow', currentNodeData);
};
const onMenuClick = (menuItem:Object) => {
    emit('onMenuClick', menuItem);
    state.popoverShow = false;
};
</script>

<style lang="scss" scoped>
.building-org-tree {
    height: 100%;
}
.zm-tree-org {
    padding: 0;
    .horizontal {
        .tree-org-node {
            &.is-leaf {
                padding: 0;
            }
        }
    }
    .tree-org-node__inner {
        border-radius: 4px;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
        box-sizing: border-box;
        margin: 8px 0;
    }
    .tree-org-node__text {
        word-break: keep-all;
        border-radius: 2px 2px 2px 2px;
        position: relative;
        display: inline-block;
        padding: 0;
    }
    .level-1 {
        font-size: 20px;
        background: rgba(253,246,230,1);
        border: 1px solid rgba(255,192,105,1);
        padding: 22px;
    }
    .level-2 {
        font-size: 14px;
        background: rgba(228,245,252,1);
        border: 1px solid rgba(104,192,255,1);
        padding: 16px 42px;
    }
    .level-3 {
        font-size: 14px;
        background: rgba(228,252,248,1);
        border:1px solid rgba(106,223,215,1);
        padding: 5px 30px;
    }
    .level-4 {
        font-size: 14px;
        background: rgba(248,240,254,1);
        border: 1px solid rgba(187,140,237,1);
        padding: 5px 20px;
    }
    .level-5 {
        font-size: 14px;
        background: #fdf0f0;
        border: 1px solid rgba(230, 0, 68, 0.4);
        padding: 5px 20px;
    }
}
.menu-item {
    height: 36px;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    padding: 0 16px;
    &:hover {
        background: #f5f7fa;
    }
    &.delete {
        color: #e60044;
    }
}
</style>
